<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左右下拉</title>
</head>
<body>
<body>
<div class="xiala">
    <button class="btn">左边来一碗拉面</button>
    <div class="caidan">
        <a href="#">拉一碗</a>
        <a href="#">拉二碗</a>
        <a href="#">拉三碗</a>
        <a href="#">拉四碗</a>
    </div>
</div>

<div class="youbian xiala">
    <button class="btn">右边来一碗拉面</button>
    <div class="caidan">
        <a href="#">拉一碗</a>
        <a href="#">拉二碗</a>
        <a href="#">拉三碗</a>
        <a href="#">拉四碗</a>
    </div>
</div>
<style>
    .youbian{
        float: right;
    }
    .caidan{
        display: none;
        position: absolute;
        width: 200px;
        background-color: gainsboro;
    }
    .xiala{
        position: relative;
        display: inline-block;
    }
    .xiala:hover .caidan{
        display: block;
    }
    a{
        display: block;
        text-align: center;
        color: black;
        text-decoration: none;
        font-size: 20px;

    }
    .btn{
        width: 200px;
        height: 100px;
        background-color: lightgreen;
        color: white;
        border: none;
        font-size: 30px;
    }
    .btn:hover{
        background-color: green;
    }
    a:hover{
        background-color: grey;
    }

</style>
</body>
</html>
